<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		
		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		
		<style type="text/css">
			.el-table__body-wrapper {
				max-height: calc(100vh - 80px - 300px);
				overflow-y: auto !important;
			}


			
			.form-wrapper .from-title {
				cursor: pointer;
			}
			
			.form-wrapper .el-select {
				width: 120px;
			}
			
			.form-wrapper .button-wrapper {
				justify-content: space-between;
			}

			.button-wrapper-right .el-input__prefix, .el-input__suffix {
				cursor: pointer;
			}
			.form-wrapper .opearButton {
				cursor: pointer;
			}
			.form-wrapper .el-table th, .el-table tr {
				padding: 6px !important;
			}
			

			



		
			
			

		</style>




	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">我的工单</span>
					<span class="nav-item">工单记录</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title">
					<i class="icon el-icon-back"></i>工单记录</span>
					<div class="button-wrapper  fboxRow">
						<div class="button-wrapper-left fboxRow">
							<div @click="handleClickCreateOrder" class="yzButton newServer active">创建工单</div>
							
							<el-select class="slot-elselect"  @visible-change="watchOrderType" @change="changeOrderType" placeholder="">
								<template slot="prefix">
									{{getselectOrderName()}}
								</template>
								<el-option  :class="{'yzhover':item.value === selectOrderType && isFirstShowOrderType,'selected':item.value === selectOrderType}" v-for="(item,index) in orderTypeGroup" :label="item.label"  :value="item.value">
								</el-option>
							</el-select>
						</div>
						<el-input
							@keyup.enter.native="getOrderRecordBykeyword"
							class="button-wrapper-right"
							style="width: 290px"
						    placeholder="请输入搜索内容"
						    suffix-icon="el-icon-search"
						    v-model="searchkeywords">
						  </el-input>
						
					</div>

					<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">



						<el-table-column label="工单编号" width="auto">
							<template slot-scope="scope">
								{{scope.row.id}}
							</template>

						</el-table-column>
						
						<el-table-column label="提交时间" width="auto">
							<template slot-scope="scope">
								{{scope.row.submitTime}}
							</template>
						</el-table-column>
						
						<el-table-column width="auto" label="工单状态">
							<template slot-scope="scope">
								<div v-html="handlestatus(scope.row)"></div>
							</template>
						</el-table-column>

						<el-table-column width="auto" label="问题类型">
							<template slot-scope="scope">
								{{scope.row.problemType}}
							</template>
						</el-table-column>
						
						
						<el-table-column width="auto" label="问题标题">
							<template slot-scope="scope">
								{{scope.row.problemTitle}}
							</template>
						</el-table-column>



						<el-table-column label="操作">
							<template slot-scope="scope">
								<span style="color: #6462F3;" @click="handleClicklookorderRecord(scope.row)"  class="opearButton">查看</span>
								<span  v-if="scope.row.status === 'waithandle' || scope.row.status === 'handling'" style="color: #F21C30;" @click="handleClickCloseorderRecord(scope.row)"  class="opearButton ml-30">关闭</span>
							</template>
						</el-table-column>


					</el-table>
						<div class="pagination-wrapper">
						  <div class="total-wrapper">
							  <span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							  <el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								    <el-option
								      v-for="item in pageOptions"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
							  </el-select>
						  </div>
						  <el-pagination
							:page-size="pageInfo.pagesize"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="pageInfo.currentPage"
							layout="prev, pager, next, jumper"
							:total="pageInfo.totalSize">
						  </el-pagination>
						</div>
				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						isFirstShowOrderType:true, // 是否是第一次展示工单类型
						selectOrderType: 'allOrder', // 选中工单类型  默认为全选
						orderTypeGroup:[
						{
							label: '全部',
							value: 'allOrder'
						},
						{
							label:'未处理',
							value: 'waithandle'
						},{
							label: '处理中',
							value: 'handling'
						},{
							label:'已处理',
							value: 'alreadyhandle'
						},{
							label: '已评价',
							value: 'alreadyestimate'
						}],
						searchkeywords:undefined, //  搜索关键字
						// 表格数据
						tableData: [{
							id: '12345738',
							submitTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'waithandle',
							problemType: '技术', // 初始的
							problemTitle: '服务器无法打开',
						},{
							id: '12345738',
							submitTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'handling',
							problemType: '技术', // 初始的
							problemTitle: '服务器无法打开',
						},{
							id: '12345738',
							submitTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'alreadyhandle',
							problemType: '技术', // 初始的
							problemTitle: '服务器无法打开',
						},{
							id: '12345738',
							submitTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'alreadyestimate',
							problemType: '技术', // 初始的
							problemTitle: '服务器无法打开',
						},{
							id: '12345738',
							submitTime: '2020-11-25  11:24:46', // 修改时 变化的
							status:'alreadyestimate',
							problemType: '技术', // 初始的
							problemTitle: '服务器无法打开',
						}],
						
						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage:1,
							totalSize: 41
						},
						pageOptions: [{
						  value:  6,
						  label: '6条/页'
						}, {
						  value:  8,
						  label: '8条/页'
						},{
						  value:  10,
						  label: '10条/页'
						}],
						

					}
				},

				methods: {
				// 创建工单的方法
				handleClickCreateOrder:_throttle(function() {
					console.log('点击创建工单按钮')
					// 防止有session缓存
					sessionStorage.removeItem('currentStep')
					window.open('orderSubmit.html','_self')
				}),
				// 获取选择的状态名称
				getselectOrderName:function() {
					let name = ''
					let that = this
					this.orderTypeGroup.forEach(function(item){
						if(item.value === that.selectOrderType) {
							if(item.value === 'allOrder') {
								name =  '工单状态'
							}else {
								name =  item.label 
							}
						}
					})
					return name
				},
				// 改变工单类型
				changeOrderType: function(e) {
					
					this.selectOrderType =  e
					console.log(e)
					console.log('这里要重新发起请求  重要参数 selectOrderType')
				}, 
				// 工单类型下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
				watchOrderType:function(e) {
					if(e) {
						$('.el-select-dropdown__item').removeClass('hover')
						this.isFirstShowOrderType =  true
					}
				},
				// 搜索
				getOrderRecordBykeyword: function() {
					if(this.searchkeywords === '' ||  this.searchkeywords === undefined) {
						return 
					}
					console.log('获取工单记录数据')
				},
				//处理状态
				handlestatus: function(row) {
					//  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期; 重启中 restarting；释放 release；
					switch (row.status) {
						case 'waithandle':
							return '<p style="color:#FF9416">未处理</p>'
						case 'handling':
							return '<p style="color:#3FBF70">处理中</p>'
						case 'alreadyhandle':
							return '<p>已处理</p>'
						case 'alreadyestimate':
							return '<p style="color:#6462F3">已评价</p>'
						default:
							break;
					}
				
				},
				handleSizeChange:function(e) {
									console.log(e)
				},
				handleCurrentChange:function(val) {
									console.log('当前页为xxxxx')
				},
				// 点击查看工单
				handleClicklookorderRecord:_throttle(function(row) {
					console.log('点击查看工单')
					window.open('orderHandle.html?id=' + row.id, '_self')
				}),
				// 点击关闭工单
				handleClickCloseorderRecord:_throttle(function() {
					console.log('点击关闭工单')
				}),
				
				
				
				},
				mounted: function() {
							let that = this
							$('.el-select-dropdown__item').hover(function() {
								that.isFirstShowOrderType =  false
							})
							
							$('.button-wrapper-right .el-input__suffix').click(function() {
								that.getOrderRecordBykeyword()
							})
				}

			})
		</script>
	</body>
</html>
